<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title>授权管理</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%@ include file="/WEB-INF/jsp/common/inc.jsp" %>
    <script type="text/javascript" src="${_resources}js/jquery.treetable.js"></script>
    <link rel="stylesheet" type="text/css" href="${_resources}css/jquery.treetable.css">
    <link rel="stylesheet" type="text/css" href="${_resources}css/jquery.treetable.theme.default.css">
	<link rel="stylesheet" type="text/css" href="${_resources}css/style.css">
<%-- <script type="text/javascript" src="${_resources}js/jurisdiction/role/initPermission.js"></script> --%>

<script type="text/javascript">
$(function(){
    // initialize treeTable
    $("#example-basic").treetable({
        expandable : true,
        initialState:"expanded",
        //expandable : true
        clickableNodeNames:false,//点击节点名称也打开子节点.
        indent :10//每个分支缩进的像素数。
    });


    // Highlight a row when selected
    $("#example-basic tbody").on("mousedown", "tr", function() {
        $(".selected").not(this).removeClass("selected");
        $(this).toggleClass("selected");
    });

    $("#example-basic input[type=checkbox]").click(function(e){
        checkboxClickFn(this,null,null,1);
    });

});

function checkboxClickFn(_this, autoFlag, parentSelectedFlag,first){
    var checked = $(_this).attr("checked");
    var menuId = $(_this).parent().parent().attr("data-tt-id");
    var parentMenuId = $(_this).parent().parent().attr("data-tt-parent-id");
    var childCount = $("#example-basic").find("[data-tt-parent-id='"+menuId+"']").find("input[type=checkbox]").length;
    var tdA = $(_this).closest("td");
    var num = tdA.index();
    if(autoFlag){//自动触发
        if(parentSelectedFlag){//如果是需要选中其父节点
            //将其直接的父节点置为选中状态
            return;
        }
    
        if(checked){//如果是已经选中，则其子菜单全部选中
            if(childCount == 0){
                return;
            }
            $("#example-basic").find("[data-tt-parent-id='"+menuId+"']").find("input[type=checkbox]").each(function(){           
                if(first == 1){
                    if(num == 0){
                        $(this).attr("checked",true).prop("checked",true);
                        checkboxClickFn(this,true);
                    }
                }else{
                    $(this).attr("checked",true).prop("checked",true);
                    checkboxClickFn(this,true);
                }
            });
        }else{
             //如果是取消选中，则其子菜单全部取消选中
            if(childCount == 0){
                return;
            }
            $("#example-basic").find("[data-tt-parent-id='"+menuId+"']").find("input[type=checkbox]").each(function(){
                //$(this).prop("checked",false).removeAttr("checked");
                //checkboxClickFn(this,true);
                if(first == 1){
                    if(num == 0){
                        $(this).prop("checked",false).removeAttr("checked");
                        checkboxClickFn(this,true);
                    }
                }else{
                    $(this).prop("checked",false).removeAttr("checked");
                    checkboxClickFn(this,true);
                }
            });
        }
        return;
    }
    //手动触发
    if(!checked){
        $(_this).attr("checked",true);
        $(_this).prop("checked",true);
        if(first == 1){
        	checkParentFu(_this,num);
        }
        $("#example-basic").find("[data-tt-id='"+menuId+"']").find("input[type=checkbox]").each(function(index){
            if(first == 1){
                if(num == 0){
                    $(this).attr("checked",true).prop("checked",true);
                    checkboxClickFn(this,true); 
                }else{
                    if(index == 0){
                        $(this).attr("checked",true).prop("checked",true);
                    }
                }
            }else{
                $(this).attr("checked",true).prop("checked",true);
                checkboxClickFn(this,false);
            }
        });
    }else{
        $(_this).prop("checked",false).removeAttr("checked");
        if(first == 1  &&  num == 1 ) {
            return;
        }
        $("#example-basic").find("[data-tt-id='"+menuId+"']").find("input[type=checkbox]").each(function(){
            if(first == 1){
                if(num == 0){
                    $(this).prop("checked",false).removeAttr("checked");
                    checkboxClickFn(this,true);
                }
            }else{
                $(this).prop("checked",false).removeAttr("checked");
                checkboxClickFn(this,true);
            }
        });
    }
}


function checkParentFu(_this,num){
	 var parentMenuId = $(_this).closest("tr").attr("data-tt-parent-id");
	 var menuId = $(_this).closest("tr").attr("data-tt-id");
	 if(num == 1 || num == "1"){
		 $("#example-basic").find("[data-tt-id='"+menuId+"']").find("input[type=checkbox]").each(function(){
			 var tdA = $(this).closest("td");
			 var chilNum = tdA.index();	
			 if(chilNum == 0){
				 $(this).attr("checked",true);
				 $(this).prop("checked",true);
				 checkParentFu(this,0)
			 }
		 });
	 }else{
		 if(parentMenuId == null || parentMenuId == ""){
	         return;//已经到根节点，直接返回
	     }

		 $("#example-basic").find("[data-tt-id='"+parentMenuId+"']").find("input[type=checkbox]").each(function(){
			 var tdA = $(this).closest("td");
			 var chilNum = tdA.index();	
			 if(chilNum == 0){
				 $(this).attr("checked",true);
				 $(this).prop("checked",true);
				 checkParentFu(this,0)
			 }
		 });
	 }
}

/* 原页面js开始 */
$(function (){
	
	//先展示所有菜单和权限
	var permissionIds = '${permissionIds}';
	var permissionString = '${permissionString}';
	var userId = '${userId}';
	
	//行 居中显示 
	(function(){
		setHeight();
	})();
	function setHeight(){
		$('.permission .qxian_c li').each(function(index, element) {
            var _this=$(this);
			var qxianliH= _this.find('.qxian_r').outerHeight(true); 
			if(qxianliH <= 34){
				qxianliH = 34;
			}
			_this.find('.qxian_l').css({
				'line-height':qxianliH+'px',
				'height':qxianliH+'px', 
				'text-overflow':'ellipsis',
				'white-space':'nowrap',
				'overflow':'hidden',
			});
        });
	}
	
}); 

function save(){
	var permissions = [];
	$('input[type="checkbox"]:checked').each(function(){
		var tdA = $(this).closest("td");
		var num = tdA.index()+1;
		var id = $(this).prop("name");
		//console.info("num:"+num+"=======id:"+id);
		permissions.push("{\"id\":\""+id+"\",\"value\":\""+num+"\"}");
	});
	
	$.ajax({
		url : "${_baseUrl}/role/updateMenuAndPermission",
		type : "post",
		dataType : "text",
		async : false,// ！重要 同步请求。效果:ajax未进行则其他代码不运行
  		data : {permissions : permissions.join(","),roleId:"${roleId}",status:"${status}"},
		success : function(json) {
			layer.msg(json);
		},
		error:function(data){
			layer.msg("系统错误,请联系管理员");
		}
	});
}

function closeWin(){
	parent.closeWin();
}
</script>
 <style type="text/css">
        /* table.treetable tr.selected{background-color: transparent;  color: #333;} */
        table.treetable thead tr th{border: 1px solid #ccc;font-weight: 100;padding: 10px 2px 10px 2px;text-align: center;font-size: 16px;color: #333;background: #fff;}
        /* table.treetable tr.branch{background-color: #fff;} */
        table.treetable tbody tr td{cursor: default;padding: 6px 5px;font-size: 14px;border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;}
        input[type="radio"], input[type="checkbox"]{margin: -2px 8px 0px 5px;}
        table.treetable{border: 1px solid #ccc;}
        .right_div{display:inline-block;width:25%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
        table thead tr th:first-child{width:39%;}
        table thead tr th:nth-child(2){width:60%;}
        table.treetable tr.selected{background-color: #ccdcff;color: #333;line-height: 26px;}
        table.treetable tr.branch,table.treetable{line-height: 26px;}
        table.treetable tr.branch{background-color:#f0f1f1}
    </style>
</head>
<body>
<div class="permission" style="min-width:880px; width:98%;margin:auto; padding-bottom:10px;">
    <table id="example-basic" class="treetable">
    <thead>
    <tr>
        <th>名称</th>
        <th>权限</th>
    </tr>
    </thead>
    <tbody>
		${html}
    </tbody>
</table>
    <div class="permission_an mubanclass_an ma mt30">
    	<shiro:hasPermission name="role:updateMenuAndPermission">
 			<c:if test="${ roleInfo.roleName != '安全保密员'  &&  roleInfo.roleName != '安全审计员'  && roleInfo.roleName != '系统管理员'}">
	        		<a href="javascript:;" class="per_baocun" onclick="save()" id="save">保 存</a>
	        </c:if>		
	    </shiro:hasPermission>
        <shiro:hasPermission name="role:close3">
            <a href="javascript:;" class="per_gbi" id="close" onclick="closeWin()">关 闭</a>
        </shiro:hasPermission>


    </div>
</div>

</body>
</html>